<template>
	<!-- 商务办公 -->
	<view class="content">
		<view class="postings">
			<view class="post_title">
				租赁信息
			</view>
			<view class="post_con ">
				<text>租赁状态</text>
				<text :class="info.leaseState==0?'rent':'occupancy'">{{info.leaseState==0?'待租':'已租'}}</text>
			</view>
			<view v-if="info.leaseState==1" class="post_con">
				<text>入驻企业</text>
				<text>{{info.enterpriseName}}</text>
			</view>
			<view v-if="info.leaseState==1" class="post_con">
				<text>租赁日期</text>
				<text>{{info.beginTime}}-{{info.endTime}}</text>
			</view>
		</view>
		<view class="postings basic">
			<view class="post_title">
				<text>基本信息</text>
				<text class="details" @click="showPlan">平面图</text>
			</view>
			<view class="post_con">
				<text>园区</text>
				<text>{{nullStr(info.parkName)}}</text>
			</view>
			<view class="post_con">
				<text>楼栋</text>
				<text>{{nullStr(info.buildingName)}}栋</text>
			</view>
			<view class="post_con">
				<text>楼层</text>
				<text>{{nullStr(info.floor)}}</text>
			</view>
			<view class="post_con">
				<text>房号</text>
				<text>{{nullStr(info.houseNumber)}}</text>
			</view>
			<view class="post_con">
				<text>建筑面积</text>
				<text>{{nullStrZ(info.builtUpArea)}}m²</text>
			</view>
			<view class="post_con">
				<text>实用面积</text>
				<text>{{nullStrZ(info.contractArea)}}m²</text>
			</view>
		</view>
		<view class="postings facility">
			<view class="post_title">
				配套设施
			</view>
			<view v-for="(item,index) in info.facilityList" :key="index" class="post_con">
				<text>{{item.facilityName}}</text>
				<text>{{item.quantity}}</text>
			</view>
		</view>

			<!-- 弹窗 -->
			<u-modal v-model="planShow" :show-confirm-button='false'  :mask-close-able="true" :show-title='false'>
				<view class="priveInformation">
					<view class="priceText borderPrice top-wrap">
						<u-swiper :list="info.fileList" name="url" height="400" mode="none"></u-swiper>
					</view>
				</view>
			</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				factory: '',
				planShow: false, //弹窗
			};
		},
		onLoad(option) {
			const rows = JSON.parse(option.row)
			this.factoryId = rows.id
			this.getTitle(rows.parkNum + " | " + rows.roomNum)
			this.getInfo()
		},
		methods: {
			getTitle(title) {
				uni.setNavigationBarTitle({
					title: title
				});
			},
			showPlan() {
				this.planShow = true
			},
			getInfo() {
				let that = this
				//联网加载数据
				this.apis.buildingApi.buiRoom(this.factoryId).then(res => {
					this.info = res.data
				}).catch(() => {
					//联网失败的回调,隐藏下拉刷新的状态
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$subheadColor:#111111;
	$titleColor:#333333;

	@mixin boldTitle {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	@mixin bordcon {
		font-size: 28rpx;
		color: #333333;
	}

	@mixin padding {
		padding: 30rpx 0;
	}

	::v-deep .u-model {
		height: 400rpx !important;
	}

	.content {
		padding: 20rpx;
		box-sizing: border-box;

		.postings {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			padding: 0 32rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			box-sizing: border-box;

			.post_title {
				@include bordcon @include padding border-bottom: 1rpx solid #EEEEEE;
			}

			.post_con {
				display: flex;
				justify-content: space-between;

				@include padding text:nth-child(1) {
					@include boldTitle
				}

				text:nth-child(2) {
					@include bordcon
				}

				// 待租
				.rent {
					color: #F74D39 !important;
				}

				// 已租
				.occupancy {
					color: #44D94B !important;
				}
			}
		}

		.basic {
			.post_title {
				display: flex;
				justify-content: space-between;

				@include bordcon @include padding text:nth-child(2) {
					@include boldTitle
				}
			}

			.post_con {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #EEEEEE;

				@include padding text:nth-child(1) {
					@include boldTitle
				}

				text:nth-child(2) {
					@include bordcon
				}
			}

			view:last-child {
				border-bottom: none;
			}
		}

		.facility {
			.post_con {
				border-bottom: 1rpx solid #EEEEEE;

				text:nth-child(2) {
					@include bordcon
				}
			}

			view:last-child {
				border-bottom: none;
			}

		}

		.priveInformation {
			position: relative;
			.top-wrap {
				width: 100%;
				height: 400rpx;
			}
		}
	}
</style>
